/* fonts: horroroid, stone wall, purpose normal, october crow,  */

:root {
  --color1: var(--night);
  --color2: #FFC125;
  --color3: #FFB700;
}

@keyframes spin {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

body {background-color: var(--jet); padding: 15px;}

/* Vertical */

.border.vertical {border: 6px transparent; border-radius: 4px; box-shadow: 5px 5px var(--color2), -7px -7px var(--color1);}
#container.vertical {background-color: dimgrey; background: linear-gradient(to bottom, black, var(--color3), black);
  min-height: 885px; max-height: auto; width: 500px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; margin-bottom: 25px;
  color: lightgrey; font-family: 'Horroroid'; font-size: 17px; letter-spacing: 1px; text-align: center;
  display: flex; flex-direction: column; }
#header.vertical {width: inherit; position: relative; top: -4px; left: -2.5px; margin: inherit;}
#banner.vertical {width: inherit;}
#icon.vertical {height: 150px; width: 150px; position: relative; top: -120px; left: 0px;}
#border.vertical {background: linear-gradient(to right, black, black, var(--color2));
  border: 0px solid transparent; border-radius: 100px; animation: spin 4s linear infinite; height: 150px; width: 150px;}
#avatar.vertical {mask-image: radial-gradient(circle, white 65%, transparent 65%);
  height: 150px; width: auto; position: absolute; top: 0px; left: 0px;}
#nameplate.vertical, #pronouns.vertical {text-align: left; padding-left: 8px;}
#nameplate.vertical {color: var(--color2); font-size: 18px;
  height: 50px; width: 240px;
  background: linear-gradient(to right, black, grey, black); margin-bottom: 10px;}
#name.vertical {text-shadow: 2px 2px black, 3px 3px var(--color3); position: relative; top: 5px;}
#pronouns.vertical {color: lightgrey; font-size: 16px;
  background-color: black; background: linear-gradient(to right, black, grey, black);
  width: 365px; padding-top: 1px; padding-bottom: 1px; margin-bottom: inherit;}
#bio.vertical {background: linear-gradient(to right, black, grey, black); height: auto; padding: 5px;}
#description.vertical {list-style: none;}